import React from 'react';
import logo from './logo.svg';
import './App.css';
import Panel from './components/Panel';
import Item from './components/Item'

type Hello1Props = {
  name: string,
  age?: number
  onDivClick?: (name: 'up' | 'down') => void
}

// FC等价于FunctionComponent
const Hello1: React.FC<Hello1Props> = ({ name, age = 18, onDivClick }) => {
  const onClick = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!onDivClick) {
      return
    }
    onDivClick('up')
  }
  return <div onClick={onClick}>hello1: {name},{age}</div>
}


const Hello2 = ({ name, age, children }: { name?: string, age?: number, children?: React.ReactNode }) => {
  return <div>hello2: {name},{age}{children}</div>
}

const Hello3 = (props: {name?: string, age?: number}) => {
  return <div>hello3: {props.name}, {props.age}</div>
}

type State = {
  count: number
}
interface Props extends React.PropsWithChildren {
  msg?: string
}

class C1 extends React.Component {
  render(): React.ReactNode {
    return <div>无参数无状态</div>
  }
}
class C2 extends React.Component<Props> {
  // static defaultProps: Partial<Props> = {
  //   msg: '参数默认值'
  // }
  static defaultProps: Props = {
    msg: '参数默认值'
  }
  render(): React.ReactNode {
    return <div>有参数无状态，{this.props.msg}</div>
  }
}
class C3 extends React.Component<{}, State> {
  state: Readonly<State> = {
    count: 0
  }
  render(): React.ReactNode {
    return <div onClick={() => this.setState({ count: this.state.count + 1 })}>无参数有状态,{this.state.count}</div>
  }
}
class C4 extends React.Component<Props, State> {
  render(): React.ReactNode {
    return <div>有参数有状态</div>
  }
}

function App() {
  return <div className='App'>
    <Panel name='wqewqwqe' onChange={() => alert('点击了')}/>
    <Item onItemClick={name => console.log(name)}/>

    <div style={{ border: '1px solid #333' }}>分割线</div>

    <Hello1 name='qweewq' onDivClick={dir => alert('点击' + dir)}/>
    <Hello2>子元素</Hello2>
    <Hello3 name='qweqwe' age={22}/>
    <C2/>
    <C3/>
  </div>
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
